<template>
  <!-- 输入框 -->
  <view class="comment-container" :style="{ bottom: bottom + 'px' }">
    <uni-easyinput
      v-model="value"
      type="textarea"
      placeholder="说点什么..."
      :maxlength="50"
      :inputBorder="false"
      :focus="true"
    ></uni-easyinput>
    <button class="commit" type="primary" :disabled="!value" size="mini" @click="onBtnClick">发送</button>
  </view>
</template>

<script>
import { userArticleComment } from '../../api/user'
export default {
  name: 'article-comment-commit',
  props: {
    articleId: {
      type: String
    }
  },
  data() {
    return {
      value: '', // 发表内容
      bottom: 0 //
    }
  },
  created() {
    // 解决软键盘遮挡输入框的问题，
    /**
     *  @onKeyboardHeightChange 监听键盘高度变化
     */
    uni.onKeyboardHeightChange(({ height }) => {
      this.bottom = height
      console.log(height, 'comment')
    })
  },
  methods: {
    /**
     * 发送按钮点击事件
     */
    async onBtnClick() {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      const res = await userArticleComment({ articleId: this.articleId, content: this.value })
      uni.showToast({
        title: '发表成功',
        icon: 'success',
        mask: true
      })
      // 发表成功之后的回调
      // 发表成功之后的回调
      this.$emit('success', res)
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-container {
  background-color: $uni-bg-color;
  text-align: right;
  padding: $uni-spacing-row-base;
  position: relative;
}
</style>
